<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编码解码辅助工具</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .container {
    max-width: 1000px; /* Increased max-width */
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transform: scale(1.75); /* Scale up the container */
    transform-origin: center; /* Keep the scaling centered */
  }
  h2 {
    color: #333;
    text-align: center;
    font-size: 24px;
  }
  .input-group {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .input-group label {
    flex: 1;
    text-align: center;
    font-size: 20px;
  }
  .input-group input, 
  .input-group button, 
  .input-group .result {
    flex: 1;
    width: 100%;
    padding: 12px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 18px;
  }
  .input-group button {
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
    border: none;
  }
  .input-group button:hover {
    background-color: #4cae4c;
  }
  .result {
    background-color: #e8f5e9;
    border: 1px solid #c8e4c9;
    text-align: center;
  }
</style>
</head>
<body>
<div class="container">
  <h2>编码解码辅助工具</h2>
  <div class="input-group">
    <label for="decimalToBinary">十进制转二进制:</label>
    <input type="number" id="decimalToBinary" placeholder="输入十进制数">
    <button onclick="decimalToBinary()">转换</button>
    <div class="result" id="decimalToBinaryResult"></div>
  </div>

  <div class="input-group">
    <label for="binaryToDecimal">二进制转十进制:</label>
    <input type="text" id="binaryToDecimal" placeholder="输入二进制数">
    <button onclick="binaryToDecimal()">转换</button>
    <div class="result" id="binaryToDecimalResult"></div>
  </div>

  <div class="input-group">
    <label for="charToDecimal">字符转十进制数:</label>
    <input type="text" id="charToDecimal" placeholder="只能输入一个字符" maxlength="1">
    <button onclick="charToDecimal()">转换</button>
    <div class="result" id="charToDecimalResult"></div>
  </div>

  <div class="input-group">
    <label for="decimalToChar">十进制数转字符:</label>
    <input type="number" id="decimalToChar" placeholder="输入十进制数">
    <button onclick="decimalToChar()">转换</button>
    <div class="result" id="decimalToCharResult"></div>
  </div>
</div>

<script>
function decimalToBinary() {
  const decimal = document.getElementById('decimalToBinary').value;
  const binary = parseInt(decimal).toString(2);
  const formattedBinary = binary.match(/.{1,4}/g).join(' '); // Format binary string
  document.getElementById('decimalToBinaryResult').textContent = formattedBinary;
}

function binaryToDecimal() {
  const binary = document.getElementById('binaryToDecimal').value;
  const result = parseInt(binary, 2);
  document.getElementById('binaryToDecimalResult').textContent = result;
}

function charToDecimal() {
  const charInput = document.getElementById('charToDecimal');
  if (charInput.value.length !== 1) {
    charInput.value = ''; // Clear the input if more than one character is entered
    alert('只能输入一个字符！');
    return;
  }
  const result = charInput.value.charCodeAt(0);
  document.getElementById('charToDecimalResult').textContent = result;
}

function decimalToChar() {
  const decimal = document.getElementById('decimalToChar').value;
  const result = String.fromCharCode(parseInt(decimal));
  document.getElementById('decimalToCharResult').textContent = result;
}
</script>
</body>
</html>